<template>
    <div class="contentBox">
        <div id="contentTop">
            <div id='contentName'>{{fromNameVal}}</div>
        </div>
        <div id="content" @mouseup="contentUp($event)">
            <ul id='contentUl' @mousemove="contentMove($event)">
                <li v-for="(item,index) in list" :key="index" @mousedown="listDown(index,$event)">
                    <div class="contentdiv" v-if='item.dataType != 7 && item.dataType != 5'>
                        <div class="listLiTop" @mouseenter="listTopEnter(index)" @mouseleave="listTopLeave(index)">
                            <div class="listTopHover" v-show='item.hoverTopShow'></div>
                            <div v-show="!listShow" @click="LiDeleteClick(index,$event)" class="listLiDelete">x</div>
                        </div>
                        <div class="listLi" :class="{borderOk:item.borShow}">
                            <div class="liDown" v-if='item.downShow'></div>
                            <div class="liContents" v-if='item.dataType == 8'>
                                {{item.formLabel}}
                            </div>
                            <div class="liContent" v-if='item.dataType != 8'>
                                <div class="liLabel">{{item.formLabel}}</div>
                                <div class="liHelp">{{item.help}}</div>
                                <div class="liRequired">
                                    <span v-show='item.isRequired == 1'>(必填)</span>
                                </div>
                                <div v-if='item.dataType == 3 || item.dataType == 4' class="liIco"></div>
                                <div v-if='item.dataType == 10' class="liImg"></div>
                            </div>
                        </div>
                        <div class="listLiBottom" @mouseenter="listBottomEnter(index)" @mouseleave="listBottomLeave(index)">
                            <div class="listBottomHover" v-show='item.hoverBottomShow'></div>
                        </div>
                    </div>
                    <div class="contentdiv timeSection" v-if='item.dataType == 5'>
                        <div class="listLiTimeTop" @mouseenter="listTopEnter(index)" @mouseleave="listTopLeave(index)">
                            <div class="listTopHover" v-show='item.hoverTopShow'></div>
                            <div v-show="!listShow" @click="LiDeleteClick(index,$event)" class="listLiDelete">x</div>
                        </div>
                        <div class="listLiTime" :class="{borderOk:item.borShow}">
                            <div class="liDown" v-if='item.downShow'></div>
                            <div class="listLiTimeUp">
                                <div class="liContent">
                                    <div class="liLabel">{{item.formLabel}}</div>
                                    <div class="liHelp">{{item.help}}</div>
                                    <div class="liRequired">
                                        <span v-show='item.isRequired == 1'>(必填)</span>
                                    </div>
                                    <div class="liIco"></div>
                                </div>
                            </div>
                            <div class="listLiTimeFoot">
                                <div class="liContent">
                                    <div class="liLabel">{{item.formLabels}}</div>
                                    <div class="liHelp">{{item.help}}</div>
                                    <div class="liRequired">
                                        <span v-show='item.isRequired == 1'>(必填)</span>
                                    </div>
                                    <div class="liIco"></div>
                                </div>
                            </div>
                        </div>
                        <div class="listLiTimeBottom" @mouseenter="listBottomEnter(index)" @mouseleave="listBottomLeave(index)">
                            <div class="listTimeBottomHover" v-show='item.hoverBottomShow'></div>
                        </div>
                    </div>
                    <div class="detail" v-if='item.dataType == 7'>
                        <div class="liDowns" v-if='item.downShow'></div>
                        <div class="detailTop" @mouseenter="listTopEnter(index)" @mouseleave="listTopLeave(index)">
                            <div class="childDelete" v-show="item.hoverShow && !listShow" @click="LiDeleteClick(index,$event)">x</div>
                            <div class="detailTops">
                                <div class="detailTopHover" v-show='item.hoverTopShow'></div>
                            </div>
                            <div class="detailTopFont" :class={borderLTROk:item.borShow,borderHoverLTROk:item.hoverShow}>
                                {{item.formLabel}}
                            </div>
                        </div>
                        <div class="childContent" :class={borderLROk:item.borShow,borderHoverLROk:item.hoverShow}>
                            <div v-show='item.child.length == 0' class="childZoor" @mouseenter="childShowEnter(index)" @mouseleave="childShowLeave(index)">
                                <div v-if='item.childShow' class="childZoorTop"></div>
                                <div class="childZoorFoot">可拖入多个组件（不包含明细组件）</div>
                            </div>
                            <li v-for='(iten,ind) in item.child ' :key="ind" @mousedown="childDown(index,ind,$event)">
                                <div class="contentdiv" v-if='iten.dataType != 5'>
                                    <div class="listLiTop" @mouseenter="childTopEnter(index,ind)" @mouseleave="childTopLeave(index,ind)">
                                        <div class="listTopHover" v-show='iten.hoverTopShow'></div>
                                        <div v-show="!listShow" @click="childLiDeleteClick(index,ind,$event)" class="listLiDelete">x</div>
                                    </div>
                                    <div class="listLis" :class="{borderOk:iten.borShow}">
                                        <div class="liDown" v-if='iten.downShow'></div>
                                        <div class="liContents" v-if="iten.dataType == 8">
                                            {{iten.formLabel}}
                                        </div>
                                        <div class="liContent" v-if="iten.dataType != 8">
                                            <div class="liLabel">{{iten.formLabel}}</div>
                                            <div class="liHelp">{{iten.help}}</div>
                                            <div class="liRequired">
                                                <span v-show='iten.isRequired == 1'>(必填)</span>
                                            </div>
                                            <div v-if='iten.dataType == 3 || iten.dataType == 4' class="liIco"></div>
                                            <div v-if='iten.dataType == 10' class="liImg"></div>
                                        </div>
                                    </div>
                                    <div class="listLiBottom" @mouseenter="childBottomEnter(index,ind)" @mouseleave="childBottomLeave(index,ind)">
                                        <div class="listBottomHover" v-show='iten.hoverBottomShow'></div>
                                    </div>
                                </div>
                                <div class="contentdiv timeSection" v-if='iten.dataType == 5'>
                                    <div class="listLiTimeTop" @mouseenter="childTopEnter(index,ind)" @mouseleave="childTopLeave(index,ind)">
                                        <div class="listTopHover" v-show='iten.hoverTopShow'></div>
                                        <div v-show="!listShow" @click="childLiDeleteClick(index,ind,$event)" class="listLiDelete">x</div>
                                    </div>
                                    <div class="listLiTime" :class="{borderOk:iten.borShow}">
                                        <div class="liDown" v-if='iten.downShow'></div>
                                        <div class="listLiTimeUp">
                                            <div class="liContent">
                                                <div class="liLabel">{{iten.formLabel}}</div>
                                                <div class="liHelp">{{iten.help}}</div>
                                                <div class="liRequired">
                                                    <span v-show='iten.isRequired == 1'>(必填)</span>
                                                </div>
                                                <div class="liIco"></div>
                                            </div>
                                        </div>
                                        <div class="listLiTimeFoot">
                                            <div class="liContent">
                                                <div class="liLabel">{{iten.formLabels}}</div>
                                                <div class="liHelp">{{iten.help}}</div>
                                                <div class="liRequired">
                                                    <span v-show='iten.isRequired == 1'>(必填)</span>
                                                </div>
                                                <div class="liIco"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="listLiTimeBottom" @mouseenter="childBottomEnter(index,ind)" @mouseleave="childBottomLeave(index,ind)">
                                        <div class="listTimeBottomHover" v-show='iten.hoverBottomShow'></div>
                                    </div>
                                </div>
                            </li>
                        </div>
                        <div class="detailBottom" @mouseenter="listBottomEnter(index)" @mouseleave="listBottomLeave(index)">
                            <div class="detailBottomTop" :class={borderLBROk:item.borShow,borderHoverLBROk:item.hoverShow}>
                                <div class="detailBottomTopBox"></div>
                                <div class="detailBottomFont">增加明细</div>
                            </div>
                            <div class="detailBottomFoot">
                                <div class="detailTopHover" v-show='item.hoverBottomShow'></div>
                            </div>
                        </div>
                        <div class="detailCopy" v-show='detailShow'>
                            <div class="detailCopyTop" @mouseenter="detailCopyTopEnter(index)" @mouseleave="detailCopyTopLeave(index)">
                                <div v-show='item.detailCopyTopShow' class="detailCopyTopSon"></div>
                            </div>
                            <div class="detailCopyFoot" @mouseenter="detailCopyFootEnter(index)" @mouseleave="detailCopyFootLeave(index)">
                                <div v-show='item.detailCopyFootShow' class="detailCopyFootSon"></div>
                            </div>
                        </div>
                    </div>
                </li>
                <div id='Zoor' v-show='ZoorShow'></div>
            </ul>
            <div id="marBottom" @mouseenter="contentIdMove($event)" @mouseleave="contentIdleave()">
                <div id='marBottomBack' v-show='list.length == 0'></div>
            </div>
        </div>
        <div id="contentBot">

        </div>
    </div>
</template>
<script>
    export default {
        name: 'son',
        data() {
            return {
                //dataType-类型；num-内容（后面扩展）；hoverTopShow-在上面插入；hoverBottomShow-在下面插入；borShow-被选中时边框显示蓝色
                //detailCopyTopShow-选择明细时不可插入明细,明细上面标示显示;detailCopyFootShow-选择明细时不可插入明细,明细下面标示显示
                // {
                //     dataType: 7, formLabel: "明细", hoverTopShow: false, hoverBottomShow: false, borShow: false, hoverShow: false, downShow: false, childShow: false,
                //     detailCopyTopShow: false, detailCopyFootShow: false,
                //     child: [
                //         { dataType: 1, formLabel: '多行输入框框', formLabels: '', help: '请输入', optValue: '', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 2, formLabel: '数字输入框', formLabels: '', help: '请输入', optValue: '', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 3, formLabel: '单选框', formLabels: '', help: '请输入', optValue: '选项1,选项2,选项3', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 4, formLabel: '日期', formLabels: '', help: '请输入', dataFormat: 'yyyy-MM-dd HH:mm', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 5, formLabel: '开始时间', formLabels: '结束时间', help: '请输入', dataFormat: 'yyyy-MM-dd', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 6, formLabel: '单行输入框', formLabels: '', help: '请输入', optValue: '', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 8, formLabel: '说明', formLabels: '', help: '请输入', optValue: '', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 9, formLabel: '金额', formLabels: '', help: '请输入', optValue: '', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //         { dataType: 10, formLabel: '图片', formLabels: '', help: '请输入', optValue: '', isRequired: 0, dataFormat: '', hoverTopShow: false, hoverBottomShow: false, borShow: false, downShow: false },
                //     ]
                // },
                list: [],
                downIndex: 0,   //选中的组件
                downInd: 0, //选中的明细组件
                upIndex: 0, //鼠标松开时所在模板数组的位置
                upInd: 0,//鼠标松开时所在模板明细数组的位置/要插入的位置
                upInsideOutside: '',    //标记最后插入的位置是不是明细内inside-明细内，outside-明细外
                downInsideOutside: '',    //选择的明细是不是明细内inside-明细内，outside-明细外
                listDelctShow: true,    //鼠标选手机盒子中组件的标记
                listShow: false,    //鼠标选中组件移动的标记/显示标记线
                leftShow: false, //左边组件被选中添加的
                leftType: "",    //左边选中的是什么组件
                ZoorShow: false,    //组件没有填满手机盒子最下边标记线
                detailShow: false,   //选择明细时不可插入明细
                childClickShow: true,   //明细移动/点击
                moverUpShow: false,  //是否执行组件拖动
                fromNameVal: '',    //审批名
            }
        },
        mounted() {
            content.oncontextmenu = function (e) {
                return false;
            }
        },
        created: function () {
            var self = this
            drag.$on('designerUpFun', function (val) {//在手机盒子外松开鼠标
                self.listDelctShow = true
                self.detailShow = false
                for (let i = 0; i < self.list.length; i++) {
                    self.list[i].downShow = false
                    self.list[i].hoverTopShow = false
                    self.list[i].hoverBottomShow = false
                    if (self.list[i].dataType == 7) {
                        self.list[i].childShow = false
                        self.list[i].detailCopyTopShow = false
                        self.list[i].detailCopyFootShow = false
                        for (let j = 0; j < self.list[i].child.length; j++) {
                            self.list[i].child[j].downShow = false
                            self.list[i].child[j].hoverTopShow = false
                            self.list[i].child[j].hoverBottomShow = false
                        }
                    }
                }
                self.listShow = false
            })
            drag.$on('leftDown', function (val) {//左边鼠标按下
                marBottom.style.height = 520 - contentUl.offsetHeight + "px"
                self.listShow = true
                self.leftShow = true
                self.leftType = val
                if (self.leftType == 7) {
                    self.detailShow = true
                }
            })
            drag.$on('editNameFun', function (val) {//审批名称
                self.fromNameVal = val
            })
            drag.$on('editTitleFun', function (obj) {   //标题
                if (obj.insideOutside == 'outside') {//外面的
                    if (self.list.length > 0) {
                        self.list[obj.index].formLabel = obj.value
                    }
                } else if (obj.insideOutside == 'inside') {//明细的
                    if (self.list.length > 0) {
                        self.list[obj.index].child[obj.ind].formLabel = obj.value
                    }
                }
            })
            drag.$on('editTitlesFun', function (obj) {  //标题2
                if (obj.insideOutside == 'outside') {//外面的
                    if (self.list.length > 0) {
                        self.list[obj.index].formLabels = obj.value
                    }
                } else if (obj.insideOutside == 'inside') {//明细的
                    if (self.list.length > 0) {
                        self.list[obj.index].child[obj.ind].formLabels = obj.value
                    }
                }
            })
            drag.$on('edithintFun', function (obj) {    //提示文字
                if (obj.insideOutside == 'outside') {//外面的
                    if (self.list.length > 0) {
                        self.list[obj.index].help = obj.value
                    }
                } else if (obj.insideOutside == 'inside') {//明细的
                    if (self.list.length > 0) {
                        self.list[obj.index].child[obj.ind].help = obj.value
                    }
                }
            })
            drag.$on('editOptionFun', function (obj) {  //单选选项
                if (obj.insideOutside == 'outside') {//外面的
                    if (self.list.length > 0) {
                        self.list[obj.index].optValue = obj.value
                    }
                } else if (obj.insideOutside == 'inside') {//明细的
                    if (self.list.length > 0) {
                        self.list[obj.index].child[obj.ind].optValue = obj.value
                    }
                }
            })
            drag.$on('editOptimeFun', function (obj) {  //时间格式
                if (obj.insideOutside == 'outside') {//外面的
                    if (self.list.length > 0) {
                        self.list[obj.index].dataFormat = obj.value
                    }
                } else if (obj.insideOutside == 'inside') {//明细的
                    if (self.list.length > 0) {
                        self.list[obj.index].child[obj.ind].dataFormat = obj.value
                    }
                }
            })
            drag.$on('editRequiredFun', function (obj) {  //是否必填
                if (obj.insideOutside == 'outside') {//外面的
                    if (self.list.length > 0) {
                        self.list[obj.index].isRequired = obj.value == 1 ? 1 : 0
                    }
                } else if (obj.insideOutside == 'inside') {//明细的
                    if (self.list.length > 0) {
                        self.list[obj.index].child[obj.ind].isRequired = obj.value == 1 ? 1 : 0
                    }
                }
            })
            if (self.$route.query.upData == 'edit') {
                let obj = JSON.parse(self.$route.query.upList)
                let listArr = obj.templateForms
                let listCopyArr = []
                listArr.forEach(ele => {
                    if (ele.dataType == 7) {
                        listCopyArr.push({
                            dataType: ele.dataType,
                            formLabel: ele.formLabel,
                            children: ele.children,
                            child: [],
                            hoverTopShow: false,
                            hoverBottomShow: false,
                            borShow: false,
                            hoverShow: false,
                            downShow: false,
                            childShow: false,
                            detailCopyTopShow: false,
                            detailCopyFootShow: false,
                        })
                    } else {
                        listCopyArr.push({
                            dataType: ele.dataType,
                            formLabel: ele.formLabel,
                            formLabels: ele.formLabels ? ele.formLabels : '',
                            help: ele.help,
                            optValue: ele.optValue,
                            isRequired: ele.isRequired,
                            dataFormat: ele.dataFormat ? ele.dataFormat : '',
                            hoverTopShow: false,
                            hoverBottomShow: false,
                            borShow: false,
                            downShow: false
                        })
                    }
                });
                for (let i = 0; i < listCopyArr.length; i++) {
                    if (listCopyArr[i].dataType == 7) {
                        listCopyArr[i].children.forEach(ele => {
                            listCopyArr[i].child.push({
                                dataType: ele.dataType,
                                formLabel: ele.formLabel,
                                formLabels: ele.formLabels ? ele.formLabels : '',
                                help: ele.help,
                                optValue: ele.option,
                                isRequired: ele.required,
                                dataFormat: ele.dataFormat ? ele.dataFormat : '',
                                hoverTopShow: false,
                                hoverBottomShow: false,
                                borShow: false,
                                downShow: false
                            })
                        })
                    }
                }
                self.list = listCopyArr
            }
        },
        methods: {
            //删除组件
            LiDeleteClick(index, e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                this.list.splice(index, 1)
            },
            //删除明细组件
            childLiDeleteClick(index, ind, e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                this.list[index].child.splice(ind, 1)
            },
            //上面移入
            listTopEnter(index) {
                let self = this
                if (this.listShow == true) {
                    this.list[index].hoverTopShow = true
                }
                this.list[index].hoverShow = true
                this.upIndex = index
                this.upInsideOutside = 'outside'
            },
            //上面移出
            listTopLeave(index) {
                this.list[index].hoverShow = false
                this.list[index].hoverTopShow = false
            },
            //下面移入
            listBottomEnter(index) {
                if (this.listShow == true) {
                    this.list[index].hoverBottomShow = true
                }
                this.list[index].hoverShow = true
                this.upIndex = index + 1    //下面应该加1
                this.upInsideOutside = 'outside'
            },
            //下面移出
            listBottomLeave(index) {
                this.list[index].hoverShow = false
                this.list[index].hoverBottomShow = false
            },
            //在明细没有子元素时移入
            childShowEnter(index) {
                if (this.listShow == true) {
                    this.list[index].childShow = true
                }
                this.upInsideOutside = 'inside'
                this.upIndex = index
                this.upInd = 0
            },
            //在明细没有字元素时移出
            childShowLeave(index) {
                this.list[index].childShow = false
            },
            //明细上面移入
            childTopEnter(index, ind) {
                if (this.listShow == true) {
                    this.list[index].child[ind].hoverTopShow = true
                }
                this.upIndex = index
                this.upInd = ind
                this.upInsideOutside = 'inside'
            },
            //明细上面移出
            childTopLeave(index, ind) {
                this.list[index].child[ind].hoverTopShow = false
            },
            //明细下面移入
            childBottomEnter(index, ind) {
                if (this.listShow == true) {
                    this.list[index].child[ind].hoverBottomShow = true
                }
                this.upIndex = index
                this.upInd = ind + 1
                this.upInsideOutside = 'inside'
            },
            //明细下面移出
            childBottomLeave(index, ind) {
                this.list[index].child[ind].hoverBottomShow = false
            },
            //组件被选中鼠标按下时
            listDown(index, e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                if (e.button == 2 || e.button == 1) {    //阻止右键和滚轮
                    return
                }
                this.listDelctShow = false
                this.leftShow = false
                this.downIndex = index
                this.downInsideOutside = 'outside'
                this.list[index].downShow = true
                var self = this
                if (self.childClickShow == true) {
                    for (var i = 0; i < self.list.length; i++) {
                        self.list[i].borShow = false
                        if (self.list[i].dataType == 7) {
                            for (var j = 0; j < self.list[i].child.length; j++) {
                                self.list[i].child[j].borShow = false
                            }
                        }
                    }
                    self.list[index].borShow = true
                } else {
                    self.childClickShow = true
                }
                if (self.moverUpShow == false) {
                    var obj = {
                        list: self.list,
                        insideOutside: 'outside',
                        index: index,
                    }
                    drag.$emit("moverUpFun", obj)
                } else {
                    self.moverUpShow = false
                }
            },
            //明细组件被选中鼠标按下时
            childDown(index, ind, e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                if (e.button == 2 || e.button == 1) {    //阻止右键和滚轮
                    return
                }
                this.leftShow = false
                this.listDelctShow = false
                this.downIndex = index
                this.downInd = ind
                this.downInsideOutside = 'inside'
                this.list[index].child[ind].downShow = true
                var self = this
                for (var i = 0; i < self.list.length; i++) {
                    self.list[i].borShow = false
                    if (self.list[i].dataType == 7) {
                        for (var j = 0; j < self.list[i].child.length; j++) {
                            self.list[i].child[j].borShow = false
                        }
                    }
                }
                self.list[index].child[ind].borShow = true
                if (self.moverUpShow == false) {
                    var obj = {
                        list: self.list,
                        insideOutside: 'inside',
                        index: index,
                        ind: ind,
                    }
                    drag.$emit("moverUpFun", obj)
                } else {
                    self.moverUpShow = false
                }
            },
            //鼠标移动时
            contentMove(e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                if (this.listDelctShow == false) {
                    this.listShow = true
                    let dataTypeStr = ''
                    if (this.downInsideOutside == 'outside') {
                        dataTypeStr = this.list[this.downIndex].dataType
                        this.list[this.downIndex].downShow = true
                        if (this.list[this.downIndex].dataType == 7) {
                            this.detailShow = true
                        }
                    } else if (this.downInsideOutside == 'inside') {
                        this.list[this.downIndex].child[this.downInd].downShow = true
                        dataTypeStr = this.list[this.downIndex].child[this.downInd].dataType
                    }
                    marBottom.style.height = 520 - contentUl.offsetHeight + "px"
                    drag.$emit('contentMoveFun', dataTypeStr)
                }
            },
            //移入手机盒子内
            contentIdMove(e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                if (this.listShow == true) {
                    this.ZoorShow = true
                    this.upInsideOutside = 'outside'
                    this.upIndex = this.list.length ? this.list.length : 0
                    if (this.list.length == 0) {
                        content.style.overflow = 'hidden'
                    } else {
                        content.style.overflowY = 'auto'
                    }
                }
            },
            //移出手机盒子
            contentIdleave() {
                this.ZoorShow = false
            },
            //选定组件为明细时，移入明细上半部分
            detailCopyTopEnter(index) {
                this.upIndex = index
                this.list[index].detailCopyTopShow = true
                this.upInsideOutside = 'outside'
            },
            //选定组件为明细时，移出明细上半部分
            detailCopyTopLeave(index) {
                this.list[index].detailCopyTopShow = false
            },//选定组件为明细时，移入明细下半部分
            detailCopyFootEnter(index) {
                this.list[index].detailCopyFootShow = true
                this.upIndex = index + 1
                this.upInsideOutside = 'outside'
            },//选定组件为明细时，移出明细下半部分
            detailCopyFootLeave(index) {
                this.list[index].detailCopyFootShow = false
            },
            //鼠标松开
            contentUp(e) {
                e.stopPropagation();    //阻止冒泡
                e.preventDefault()      //阻止默认
                var self = this
                marBottom.style.height = 0
                self.ZoorShow = false
                self.detailShow = false
                self.listDelctShow = true
                //取消组件被选中的灰色/取消上下蓝色标识
                for (let i = 0; i < self.list.length; i++) {
                    self.list[i].downShow = false
                    self.list[i].hoverTopShow = false
                    self.list[i].hoverBottomShow = false
                    if (self.list[i].dataType == 7) {
                        self.list[i].childShow = false
                        self.list[i].detailCopyTopShow = false
                        self.list[i].detailCopyFootShow = false
                        for (let j = 0; j < self.list[i].child.length; j++) {
                            self.list[i].child[j].downShow = false
                            self.list[i].child[j].hoverTopShow = false
                            self.list[i].child[j].hoverBottomShow = false
                        }
                    }
                }
                //将选中的组件插入新的位置
                if (self.listShow == true) {
                    if (self.leftShow == false) {//手机盒子内部的明细
                        if (self.downInsideOutside == 'outside') {  //选择的组件是明细外的
                            if (self.upInsideOutside == 'outside') {    //插入的位置是明细外的
                                if (self.downIndex != self.upIndex && self.downIndex != self.upIndex - 1) { //判断有没有移动
                                    self.list.splice(
                                        self.upIndex,   //插入的位置
                                        0,  //要删除的为0
                                        self.list[self.downIndex]   //插入的内容
                                    ); //插入指定位置
                                    if (self.downIndex > self.upIndex) {
                                        self.list.splice(self.downIndex + 1, 1)
                                    } else {
                                        self.list.splice(self.downIndex, 1)
                                    }
                                    for (var i = 0; i < self.list.length; i++) {
                                        self.list[i].borShow = false
                                    }
                                    if (self.downIndex <= self.upIndex) {
                                        self.upIndex = self.upIndex - 1
                                    }
                                    self.list[self.upIndex].borShow = true
                                    self.moverUpShow = true
                                }
                            } else if (self.upInsideOutside == 'inside') { //插入的位置是明细内的
                                if (self.list[self.downIndex].dataType != 7) {  // 判断选择的是否为明细,明细内不能添加明细
                                    self.list[self.upIndex].child.splice(
                                        self.upInd,   //插入的位置
                                        0,  //要删除的为0
                                        self.list[self.downIndex] //插入的内容
                                    ); //插入指定位置
                                    self.list.splice(self.downIndex, 1)
                                    for (var i = 0; i < self.list.length; i++) {
                                        self.list[i].borShow = false
                                        if (self.list[i].dataType == 7) {
                                            for (var j = 0; j < self.list[i].child.length; j++) {
                                                self.list[i].child[j].borShow = false
                                            }
                                        }
                                    }
                                    if (self.downIndex > self.upIndex) {
                                        self.list[self.upIndex].child[self.upInd].borShow = true
                                    } else {
                                        self.upIndex = self.upIndex - 1
                                        self.list[self.upIndex].child[self.upInd].borShow = true
                                    }
                                    self.moverUpShow = true
                                }
                            }
                        } else if (self.downInsideOutside == 'inside') {  //选择的组件是明细里的
                            if (self.upInsideOutside == 'outside') {    //插入的位置是明细外的
                                self.list.splice(
                                    self.upIndex,   //插入的位置
                                    0,  //要删除的为0
                                    self.list[self.downIndex].child[self.downInd]   //插入的内容
                                ); //插入指定位置
                                if (self.downIndex >= self.upIndex) {
                                    self.list[self.downIndex + 1].child.splice(self.downInd, 1)
                                } else {
                                    self.list[self.downIndex].child.splice(self.downInd, 1)
                                }
                                for (var i = 0; i < self.list.length; i++) {
                                    self.list[i].borShow = false
                                }
                                self.list[self.upIndex].borShow = true
                                self.moverUpShow = true
                            } else if (self.upInsideOutside == 'inside') { //插入的位置是明细内的
                                if (self.downIndex == self.upIndex) {   //同一明细中移动
                                    if (self.downInd != self.upInd && self.downInd != self.upInd - 1) { //明细内判断有没有移动
                                        self.list[self.downIndex].child.splice(
                                            self.upInd,   //插入的位置
                                            0,  //要删除的为0
                                            self.list[self.downIndex].child[self.downInd] //插入的内容
                                        ); //插入指定位置
                                        if (self.downInd > self.upInd) {
                                            self.list[self.downIndex].child.splice(self.downInd + 1, 1)
                                        } else {
                                            self.list[self.downIndex].child.splice(self.downInd, 1)
                                        }
                                        for (var i = 0; i < self.list.length; i++) {
                                            self.list[i].borShow = false
                                            if (self.list[i].dataType == 7) {
                                                for (var j = 0; j < self.list[i].child.length; j++) {
                                                    self.list[i].child[j].borShow = false
                                                }
                                            }
                                        }
                                        if (self.downInd > self.upInd) {
                                            self.list[self.upIndex].child[self.upInd].borShow = true
                                            self.childClickShow = false
                                        } else {
                                            self.upInd = self.upInd - 1
                                            self.list[self.upIndex].child[self.upInd].borShow = true
                                            self.childClickShow = false
                                        }
                                        self.moverUpShow = true
                                    }
                                } else {    // 选于明细插入别的明细
                                    self.list[self.upIndex].child.splice(
                                        self.upInd,   //插入的位置
                                        0,  //要删除的为0
                                        self.list[self.downIndex].child[self.downInd] //插入的内容
                                    ); //插入指定位置
                                    self.list[self.downIndex].child.splice(self.downInd, 1)
                                    for (var i = 0; i < self.list.length; i++) {
                                        self.list[i].borShow = false
                                        if (self.list[i].dataType == 7) {
                                            for (var j = 0; j < self.list[i].child.length; j++) {
                                                self.list[i].child[j].borShow = false
                                            }
                                        }
                                    }
                                    self.list[self.upIndex].child[self.upInd].borShow = true
                                    self.moverUpShow = true
                                }
                            }
                        }

                    } else if (self.leftShow == true) { //左边选的组件
                        if (self.upInsideOutside == 'outside') {    //插入的位置是明细外的
                            let obj = {}
                            if (self.leftType == 1) {
                                obj = {
                                    dataType: 1,
                                    formLabel: '多行输入框',
                                    help: '请填写',
                                    isRequired: 0,
                                    optValue: '',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 2) {
                                obj = {
                                    dataType: 2,
                                    formLabel: '数字输入框',
                                    help: '请填写',
                                    isRequired: 0,
                                    optValue: '',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 3) {
                                obj = {
                                    dataType: 3,
                                    formLabel: '单选框',
                                    help: '请选择',
                                    isRequired: 0,
                                    optValue: '选项1,选项2,选项3',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 4) {
                                obj = {
                                    dataType: 4,
                                    formLabel: '日期',
                                    dataFormat: 'yyyy-MM-dd HH:mm',
                                    help: '请选择',
                                    isRequired: 0,
                                    optValue: '',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 5) {
                                obj = {
                                    dataType: 5,
                                    formLabel: '开始时间',
                                    formLabels: '结束时间',
                                    dataFormat: 'yyyy-MM-dd HH:mm',
                                    help: '请选择',
                                    isRequired: 0,
                                    optValue: '',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 6) {
                                obj = {
                                    dataType: 6,
                                    formLabel: '单行输入框',
                                    help: '请填写',
                                    isRequired: 0,
                                    optValue: '',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 7) {
                                obj = {
                                    dataType: 7,
                                    formLabel: '明细',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    hoverShow: false,
                                    downShow: false,
                                    childShow: false,
                                    detailCopyTopShow: false,
                                    detailCopyFootShow: false,
                                    child: []
                                }
                            } else if (self.leftType == 8) {
                                obj = {
                                    dataType: 8,
                                    formLabel: '请输入说明文字',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 9) {
                                obj = {
                                    dataType: 9,
                                    formLabel: '金额',
                                    help: '请填写',
                                    isRequired: 0,
                                    optValue: '',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            } else if (self.leftType == 10) {
                                obj = {
                                    dataType: 10,
                                    formLabel: '图片',
                                    help: '请上传图片',
                                    isRequired: 0,
                                    optValue: '',
                                    hoverTopShow: false,
                                    hoverBottomShow: false,
                                    borShow: false,
                                    downShow: false
                                }
                            }
                            self.list.splice(
                                self.upIndex,   //插入的位置
                                0,  //要删除的为0
                                obj//插入的内容
                            ); //插入指定位置
                            for (var i = 0; i < self.list.length; i++) {
                                self.list[i].borShow = false
                                if (self.list[i].dataType == 7) {
                                    for (var j = 0; j < self.list[i].child.length; j++) {
                                        self.list[i].child[j].borShow = false
                                    }
                                }
                            }
                            self.list[self.upIndex].borShow = true
                            self.moverUpShow = true
                        } else if (self.upInsideOutside == 'inside') { //插入的位置是明细内的
                            if (self.leftType != 7) {  // 判断选择的是否为明细,明细内不能添加明细
                                let obj = {}
                                if (self.leftType == 1) {
                                    obj = {
                                        dataType: 1,
                                        formLabel: '多行输入框',
                                        help: '请填写',
                                        isRequired: 0,
                                        optValue: '',
                                        hoverTopShow: false,
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 2) {
                                    obj = {
                                        dataType: 2,
                                        formLabel: '数字输入框',
                                        help: '请填写',
                                        isRequired: 0,
                                        optValue: '',
                                        hoverTopShow: false,
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 3) {
                                    obj = {
                                        dataType: 3,
                                        formLabel: '单选框',
                                        help: '请选择',
                                        isRequired: 0,
                                        optValue: '选项1,选项2,选项三',
                                        hoverTopShow: false,
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 4) {
                                    obj = {
                                        dataType: 4,
                                        formLabel: '日期',
                                        dataFormat: 'yyyy-MM-dd HH:mm',
                                        help: '请选择',
                                        isRequired: 0,
                                        optValue: '',
                                        hoverTopShow: false,
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 5) {
                                    obj = {
                                        dataType: 5,
                                        formLabel: '开始时间',
                                        formLabels: '结束时间',
                                        dataFormat: 'yyyy-MM-dd HH:mm',
                                        help: '请选择',
                                        isRequired: 0,
                                        optValue: '',
                                        hoverTopShow: false,
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 6) {
                                    obj = {
                                        dataType: 6,
                                        formLabel: '单行输入框',
                                        help: '请填写',
                                        isRequired: 0,
                                        optValue: '',
                                        hoverTopShow: false,
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 8) {
                                    obj = {
                                        dataType: 8,
                                        formLabel: '请输入说明文字',
                                        hoverTopShow: false,
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 9) {
                                    obj = {
                                        dataType: 9,
                                        formLabel: '金额',
                                        hoverTopShow: false,
                                        help: '请填写',
                                        isRequired: 0,
                                        optValue: '',
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                } else if (self.leftType == 10) {
                                    obj = {
                                        dataType: 10,
                                        formLabel: '图片',
                                        hoverTopShow: false,
                                        help: '请上传图片',
                                        isRequired: 0,
                                        optValue: '',
                                        hoverBottomShow: false,
                                        borShow: false,
                                        downShow: false
                                    }
                                }
                                if (self.leftType != 7) {
                                    self.list[self.upIndex].child.splice(
                                        self.upInd,   //插入的位置
                                        0,  //要删除的为0
                                        obj//插入的内容
                                    ); //插入指定位置
                                }
                                for (var i = 0; i < self.list.length; i++) {
                                    self.list[i].borShow = false
                                    if (self.list[i].dataType == 7) {
                                        for (var j = 0; j < self.list[i].child.length; j++) {
                                            self.list[i].child[j].borShow = false
                                        }
                                    }
                                }
                                self.list[self.upIndex].child[self.upInd].borShow = true
                                self.moverUpShow = true
                            }
                        }
                        self.leftShow = false
                    }
                    self.listShow = false
                }
                if (self.moverUpShow == true) {
                    var obj = {
                        list: self.list,
                        insideOutside: self.upInsideOutside,
                        index: self.upIndex,
                        ind: self.upInd,
                    }
                    drag.$emit("moverUpFun", obj)
                }
                drag.$emit('contentUpFun', true)
            },
        },
        watch: {
            list: {
                handler: function (val) {
                    drag.$emit("deitListFun", val)
                }
            }
        },
    }
</script>
<style scoped>
    .contentBox {
        height: 660px;
        width: 380px;
        margin-right: 30px;
        background: #fbfbfb;
        -moz-box-shadow: 8px 8px 30px black;
        box-shadow: 8px 8px 30px black;
        border-radius: 24px 24px 35px 35px;
        position: relative;
        margin-top: 34px;
    }

    #contentTop {
        position: absolute;
        top: -10px;
        left: 0;
        width: 380px;
        height: 75px;
        background: url('../../../../../static/img/设计.png') 0px 100% no-repeat #38adff;
        background-size: 100%;
        border-radius: 35px 35px 0 0;
    }

    #contentName {
        height: 27px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: center;
        font-size: 16px;
        color: #fff;
    }

    #content {
        width: 340px;
        height: 520px;
        overflow-y: auto;
        margin: 65px 20px 0px;
        overflow-x: hidden;
        z-index: 1;
        background: #f0eff4;
        position: relative;
    }



    #Zoor {
        width: 100%;
        height: 5px;
        margin-top: 5px;
        background: #38adff;
    }

    #contentBot {
        width: 340px;
        height: 15px;
        margin-left: 20px;
        background: #f0eff4;
    }

    #marBottom {
        width: 100%;
        /* z-index: 10000; */
        /* background: red; */
        /* height: 520px!important; */
    }

    #marBottomBack {
        width: 245px;
        height: 140px;
        position: absolute;
        top: 100px;
        left: 45px;
        background: url('../../../../../static/img/backZoor.png')
    }

    .contentdiv {
        position: relative;
        margin-bottom: -15px;
        min-height: 80px;
        z-index: 2;
        /* cursor: move; */
    }

    .childContent {
        min-height: 48px;
        background: #ddeff3;
        border-left: 1px solid #c8c8ca;
        border-right: 1px solid #c8c8ca;
    }

    .listLis {
        width: calc(100% - 2px);
        height: 48px;
        margin: 0px auto;
        background: #ffffff;
        line-height: 48px;
        position: absolute;
        top: 15px;
        left: 0px;
        z-index: -1;
        border-top: 1px solid #c8c8ca;
        border-bottom: 1px solid #c8c8ca;
        border-left: 1px solid white;
        border-right: 1px solid white;
        display: flex;
    }

    .listLi {
        width: calc(100% - 2px);
        height: 48px;
        margin: 0px auto;
        background: #ffffff;
        line-height: 48px;
        position: absolute;
        top: 15px;
        left: 0px;
        z-index: -1;
        border-top: 1px solid #c8c8ca;
        border-bottom: 1px solid #c8c8ca;
        border-left: 1px solid #c8c8ca;
        border-right: 1px solid #c8c8ca;
    }

    .liDown {
        width: calc(100% - 2px);
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 0;
        background: rgba(223, 222, 222, 0.8);
    }

    .liContent {
        width: 100%;
        height: 100%;
        line-height: 48px;
        display: flex;
    }

    .liContents {
        width: calc(100% - 8px);
        height: 100%;
        line-height: 48px;
        display: flex;
        padding: 0 4px;
        background: #f0eff4;
    }

    .liLabel {
        width: 96px;
        height: 48px;
        padding: 0 4px;
        font-size: 16px;
        color: #222;
    }

    .liHelp {
        width: 120px;
        height: 48px;
        padding: 0 4px;
        font-size: 13px;
        color: #929292;
        text-align: right;
    }

    .liRequired {
        width: 43px;
        height: 48px;
        padding: 0 4px;
        color: #929292;
    }

    .liIco {
        height: 100%;
        width: 24px;
        background: url('../../../../../static/img/xiangqing@2x.png') 9px 45% no-repeat;
        background-size: 50%;
    }

    .liImg {
        height: 100%;
        width: 24px;
        background: url('../../../../../static/img/图片.png') 5px 45% no-repeat;
        background-size: 75%;
    }

    .liDowns {
        width: calc(100% - 2px);
        height: calc(100% - 30px);
        position: absolute;
        top: 15px;
        left: 0px;
        z-index: 10;
        background: rgba(223, 222, 222, 0.8);
    }

    .listLiDelete {
        position: absolute;
        width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        font-size: 14px;
        top: 15px;
        right: 0;
        background: #38adff;
        color: white;
        cursor: pointer;
        display: none;
        z-index: 1;
    }

    .contentdiv:hover>.listLiTop>.listLiDelete {
        display: block;
    }

    .contentdiv:hover>.listLi {
        border: 1px dashed #38adff;
        height: 48px;
    }

    .contentdiv:hover>.listLis {
        border: 1px dashed #38adff;
        height: 48px;
    }

    .listLiTop,
    .listLiBottom {
        width: 100%;
        height: 40px;
        overflow: hidden;
        z-index: 2
    }

    .listTopHover {
        width: 100%;
        height: 5px;
        margin-top: 5px;
        background: #38adff;
    }

    .listBottomHover {
        width: 100%;
        height: 5px;
        margin-top: 30px;
        background: #38adff;
    }

    .detail {
        min-height: 110px;
        overflow: hidden;
        margin-bottom: -15px;
        position: relative;
    }

    .detailCopy {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .detailCopyTop {
        width: 100%;
        height: 50%;
        position: relative;
        z-index: 12;
    }

    .detailCopyTopSon {
        width: 100%;
        height: 5px;
        background: #38adff;
        position: absolute;
        left: 0;
        top: 5px;
    }

    .detailCopyFoot {
        width: 100%;
        height: 50%;
        position: relative;
        z-index: 12;
    }

    .detailCopyFootSon {
        width: 100%;
        height: 5px;
        background: #38adff;
        position: absolute;
        left: 0;
        bottom: 5px;
    }

    .detailTop {
        overflow: hidden;
        border-bottom: 1px solid #c8c8ca;
        position: relative;
    }

    .childDelete {
        width: 15px;
        height: 15px;
        background: #38adff;
        line-height: 15px;
        text-align: center;
        font-size: 14px;
        color: white;
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 0;
        z-index: 1000;
    }

    .detailTops {
        height: 15px;
        overflow: hidden;
    }

    .detailTopHover {
        width: 100%;
        height: 5px;
        margin-top: 5px;
        background: #38adff;
    }

    .detailTopFont {
        width: calc(100% - 17px);
        height: 40px;
        text-align: left;
        padding-left: 15px;
        line-height: 40px;
        border-left: 1px solid #c8c8ca;
        border-top: 1px solid #c8c8ca;
        border-right: 1px solid #c8c8ca;
        /* cursor: move; */
    }

    .detailBottom {
        width: 100%;
        height: 72px;
        overflow: hidden;

    }

    .detailBottomTop {
        width: calc(100%-3px);
        height: 40px;
        line-height: 40px;
        margin-top: 15px;
        background: #f7f9ff;
        /* cursor: move; */
        overflow: hidden;
        border: 1px solid #c8c8ca;
        display: flex;
    }

    .detailBottomTopBox {
        width: 6px;
        height: 8px;
        border-left: 1px solid #38adff;
        border-right: 1px solid #38adff;
        border-top: 2px solid #38adff;
        border-bottom: 2px solid #38adff;
        margin-top: 13px;
        margin-left: 125px;
        margin-right: 12px;
    }

    .detailBottomFont {
        font-size: 13px;
        color: #38adff;
    }

    .detailBottomFoot {
        width: 100%;
        height: 15px;
    }

    .listLiTime {
        width: calc(100% - 2px);
        height: 97px;
        margin: 0px auto;
        background: #ffffff;
        line-height: 48px;
        position: absolute;
        top: 15px;
        left: 0px;
        z-index: -1;
        border: 1px solid #c8c8ca;
    }

    .listLiTimeUp,
    .listLiTimeFoot {
        width: 100%;
        height: 48px;
    }

    .listLiTimeUp {
        border-bottom: 1px solid #c8c8ca;
    }

    .listLiTimeTop,
    .listLiTimeBottom {
        width: 100%;
        height: 65px;
        overflow: hidden;
    }

    .listTimeBottomHover {
        width: 100%;
        height: 5px;
        margin-top: 54px;
        background: #38adff;
    }

    .timeSection:hover>.listLiTimeTop>.listLiDelete {
        display: block;
    }


    .timeSection:hover>.listLiTime {
        height: 96px;
        border: 1px dashed #38adff;
    }

    .borderOk {
        border: 1px solid #38adff!important;
    }

    .borderLTROk {
        border-left: 1px solid #38adff!important;
        border-top: 1px solid #38adff!important;
        border-right: 1px solid #38adff!important;
    }

    .borderLROk {
        border-left: 1px solid #38adff!important;
        border-right: 1px solid #38adff!important;
    }

    .borderLBROk {
        border-left: 1px solid #38adff!important;
        border-bottom: 1px solid #38adff!important;
        border-right: 1px solid #38adff!important;
    }

    .borderHoverLTROk {
        border-left: 1px dashed #38adff;
        border-top: 1px dashed #38adff;
        border-right: 1px dashed #38adff;
    }

    .borderHoverLROk {
        border-left: 1px dashed #38adff;
        border-right: 1px dashed #38adff;
    }

    .borderHoverLBROk {
        border-left: 1px dashed #38adff;
        border-bottom: 1px dashed #38adff;
        border-right: 1px dashed #38adff;
    }

    .childZoor {
        width: 100%;
        height: 100px;
        margin-bottom: -15px;
        position: relative;
        /* cursor: move; */
    }

    .childZoorTop {
        width: 100%;
        height: 5px;
        background: #38adff;
    }

    .childZoorFoot {
        width: 100%;
        height: 95px;
        line-height: 95px;
        text-align: center;
        font-size: 14px;
        color: #c1c1c1;
        position: absolute;
        top: 5px;
        left: 0;
    }
</style>